<template>
	<view class="all-view column">
		<view class="w-100 row u-m-b-18 u-f-28">
			<view class="w-s-color-9 u-m-r-20">偏好</view>
			<view class="u-flex-1 all-scoll">
				<scroll-view scroll-x="true" class="scroll-view_h">
					<view class="row" style="height: 80rpx;">
						<block v-for="(item,index) in privilegeList">
							<view class="scoll-item u-bdr-28 " @click="previlegeIndex=item.id" :key="index"
								:class="previlegeIndex==item.id ? 'bg-primary w-s-color-f' : ''">{{item.label}}</view>
						</block>
					</view>
				</scroll-view>
			</view>
			
		</view>
		<view class="w-100 row u-m-b-18 u-f-28">
			<view class="w-s-color-9 u-m-r-20">类型</view>
			<view class="u-flex-1 all-scoll">
				<scroll-view scroll-x="true" class="scroll-view_h">
					<view class="row" style="height: 80rpx;">
						<block v-for="(item,index) in likeList">
							<view class="scoll-item u-bdr-28 " @click="likeIndex=item.classificationId" :key="index"
								:class="likeIndex==item.classificationId ? 'bg-primary w-s-color-f' : ''">{{item.classificationName}}</view>
						</block>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="w-100 row u-m-b-18 u-f-28">
			<view class="w-s-color-9 u-m-r-20">年份</view>
			<view class="u-flex-1 all-scoll">
				<scroll-view scroll-x="true" class="scroll-view_h">
					<view class="row" style="height: 80rpx;">
						<block v-for="(item,index) in yearList">
							<view class="scoll-item u-bdr-28 " @click="yearIndex=index" :key="index"
								:class="yearIndex==index ? 'bg-primary w-s-color-f' : ''">{{item}}</view>
						</block>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="w-100 row u-m-b-18 u-f-28">
			<view class="w-s-color-9 u-m-r-20">排序</view>
			<view class="u-flex-1 all-scoll">
				<scroll-view scroll-x="true" class="scroll-view_h">
					<view class="row" style="height: 80rpx;">
						<block v-for="(item,index) in sortList">
							<view class="scoll-item u-bdr-28 " @click="sortIndex=index" :key="index"
								:class="sortIndex==index ? 'bg-primary w-s-color-f' : ''">{{item}}</view>
						</block>
					</view>
				</scroll-view>
			</view>
		</view>
		<prefecture-view :heardShow="false" :list='list'></prefecture-view>
		<empty title="暂无视频" :isShow='false' v-if="list.length==0"></empty>
		<u-loadmore v-if="list.length > 0" :status="status" />
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	import prefectureView from "../prefectureView.vue"
	export default {
		components: {
			empty,
			prefectureView
		},
		data() {
			return {
				likeIndex: '',
				likeList: [],
				privilegeList: [ //标签
					{
						id: '',
						label: '全部'
					},
					{
						id: 1,
						label: '医神'
					}, {
						id: 2,
						label: '赘婿'
					}, {
						id: 3,
						label: '鉴宝'
					}, {
						id: 4,
						label: '战神'
					}, {
						id: 5,
						label: '娱乐明星'
					},
					{
						id: 6,
						label: '神医'
					}, {
						id: 7,
						label: '重生'
					}, {
						id: 8,
						label: '职场'
					}, {
						id: 9,
						label: '逆袭'
					}, {
						id: 10,
						label: '复仇'
					},
					{
						id: 11,
						label: '青春'
					}, {
						id: 12,
						label: '官场'
					}, {
						id: 13,
						label: '家庭情感'
					}, {
						id: 14,
						label: '乡村'
					}, {
						id: 15,
						label: '正能量'
					},
					{
						id: 16,
						label: '成长'
					}, {
						id: 17,
						label: '伦理'
					}, {
						id: 18,
						label: '都市情感'
					}, {
						id: 19,
						label: '社会话题'
					}, {
						id: 20,
						label: '灵异'
					},
					{
						id: 21,
						label: '悬疑推理'
					}, {
						id: 22,
						label: '虐恋'
					}, {
						id: 23,
						label: '甜宠'
					}, {
						id: 24,
						label: '高干军婚'
					}, {
						id: 25,
						label: '年代'
					},
					{
						id: 26,
						label: '萌宝'
					}, {
						id: 27,
						label: '腹黑'
					}, {
						id: 28,
						label: '总裁'
					}, {
						id: 29,
						label: '宫斗宅斗'
					}, {
						id: 30,
						label: '穿越'
					},
					{
						id: 31,
						label: '种田经商'
					}, {
						id: 33,
						label: '民俗'
					}, {
						id: 34,
						label: '古装'
					}, {
						id: 35,
						label: '穿越战争'
					},
					{
						id: 36,
						label: '现代军事'
					}, {
						id: 37,
						label: '奇幻'
					}, {
						id: 38,
						label: '科幻'
					}, {
						id: 39,
						label: '架空玄幻'
					}, {
						id: 40,
						label: '热血'
					},
					{
						id: 41,
						label: '历史'
					}, {
						id: 42,
						label: '搞笑'
					}, {
						id: 43,
						label: '仙侠'
					}, {
						id: 44,
						label: '武侠'
					}, {
						id: 45,
						label: '二次元'
					},
					{
						id: 46,
						label: '其他'
					},
				],
				previlegeIndex:'',
				yearList: [],
				yearIndex: 0,
				sortList: ['最新', '最热'],
				sortIndex: 0,
				/* 数据 */
				list: [],
				status: 'loadmore',
				sort: '',
				page: 1,
				limit: 10,
			}
		},
		onLoad() {
			this.getYear()
			this.courseCate()
			this.getInit()
		},
		watch:{
			sortIndex(val){
				this.getInit()
			},
			previlegeIndex(val){
				this.getInit()
			},
			likeIndex(val){
				this.getInit()
			},
			yearIndex(val){
				this.getInit()
			}
		},
		onReachBottom: function() {
			if (this.page < this.pages) {
				this.page += 1
				this.status = 'loading'
				this.getCourseList()

			} else {
				this.status = 'nomore'
			}

		},
		onPullDownRefresh: function() {
			this.getInit()
		},
		methods: {
			getInit(){
				uni.showLoading({
					title:'加载中',
					mask:true,
				})
				this.page = 1;
				this.getCourseList()
			},
			courseCate(){
				this.$u.api.courseCate().then(res=>{
					res.data.unshift({
						classificationId:'',
						classificationName:'全部'
					})
					this.likeList=res.data
				})
			},
			getYear() {
				let currentYear = new Date().getFullYear();
				let yearList = []
				for (var i = currentYear - 20; i <= currentYear; i++) {
					yearList.unshift(i)
				}
				yearList.unshift('全部')
				this.yearList = yearList
			},
			//最新热播
			getCourseList() {
				let data = {
					limit: this.limit,
					page: this.page,
					courseLabelId:this.previlegeIndex,
					classifyId:this.likeIndex,
					createYear:this.yearIndex==0 ? '' : this.yearList[this.yearIndex]
				}
				if(this.sortIndex==1){
					data.sort=3
				}
				// #ifdef MP-WEIXIN
				data.wxShow = 1
				// #endif
				// #ifdef MP-TOUTIAO
				data.dyShow = 1
				// #endif
				this.$u.api.courseList(data).then(res => {
					if (res.code == 0) {
						this.pages = res.data.totalPage
						if (this.page < this.pages) {
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
						if (this.page == 1) {
							this.list = res.data.list
							
						} else {
							this.list = [...this.courseList, ...res.data.list]
						}
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
					uni.hideLoading()
					uni.stopPullDownRefresh();

				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.all-view {
		width: 100vw;
		min-height: 100vh;
		padding: 30rpx 32rpx;
		padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		.scroll-view_h{
			white-space: nowrap;
		}
		.scoll-item {
			padding: 10rpx 26rpx;
			transition: all .3s;
			text-wrap: nowrap;
		}
		.all-scoll {
			overflow-x: auto;
			height: 80rpx;
			
		}
	}
</style>